<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Docker命令生成器</title>
    <style>
        :root {
            --neon-blue: #0ff;
            --neon-pink: #f0f;
            --dark-bg: #0a0a0f;
            --darker-bg: #050507;
            --panel-bg: rgba(16, 16, 24, 0.9);
            --border-color: #2a2a3a;
            --text-color: #fff;
            --highlight-color: #0ff;
        }

        body {
            font-family: 'Rajdhani', 'Orbitron', sans-serif;
            margin: 20px;
            background-color: var(--dark-bg);
            color: var(--text-color);
            background-image: 
                linear-gradient(45deg, var(--darker-bg) 25%, transparent 25%),
                linear-gradient(-45deg, var(--darker-bg) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, var(--darker-bg) 75%),
                linear-gradient(-45deg, transparent 75%, var(--darker-bg) 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }

        .container {
            display: flex;
            gap: 20px;
            max-width: 1800px;
            margin: 0 auto;
        }

        .left-panel, .right-panel {
            flex: 1;
            background: var(--panel-bg);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2),
                        inset 0 0 20px rgba(0, 255, 255, 0.1);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
        }

        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
            animation: scanline 2s linear infinite;
        }

        .section-title {
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--highlight-color);
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 0 10px var(--highlight-color);
        }

        textarea {
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 10px;
            font-family: 'Source Code Pro', monospace;
            line-height: 1.5;
            resize: none;
        }

        #inspectInput {
            max-height: 200px;
            overflow-y: auto;
            resize: vertical;
            margin-bottom: 15px;
        }

        button {
            background: transparent;
            color: var(--highlight-color);
            border: 1px solid var(--highlight-color);
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        button:hover {
            background: var(--highlight-color);
            color: var(--dark-bg);
            box-shadow: 0 0 20px var(--highlight-color);
        }

        .config-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            position: relative;
        }

        .config-item input[type="text"] {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            padding: 5px 10px;
            border-radius: 4px;
        }

        .config-item input[type="checkbox"] {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid var(--highlight-color);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }

        .config-item input[type="checkbox"]:checked {
            background: var(--highlight-color);
            box-shadow: 0 0 10px var(--highlight-color);
        }

        .config-item input[type="checkbox"]:checked::before {
            content: '✓';
            position: absolute;
            color: var(--dark-bg);
            font-size: 14px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--highlight-color);
            border-radius: 4px;
            box-shadow: 0 0 10px var(--highlight-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--neon-pink);
        }

        /* 动画效果 */
        @keyframes scanline {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        @keyframes glow {
            0% {
                box-shadow: 0 0 5px var(--highlight-color);
            }
            50% {
                box-shadow: 0 0 20px var(--highlight-color);
            }
            100% {
                box-shadow: 0 0 5px var(--highlight-color);
            }
        }

        /* 添加字体链接 */
        @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&family=Source+Code+Pro&family=Orbitron:wght@400;500&display=swap');
    </style>
</head>
<body>
    <div class="page-title" style="
        text-align: center;
        margin-bottom: 30px;
        color: var(--highlight-color);
        font-family: 'Orbitron', sans-serif;
        font-size: 2em;
        text-transform: uppercase;
        letter-spacing: 4px;
        text-shadow: 0 0 10px var(--highlight-color);
    ">
        Docker Command Generator
    </div>
    <div class="container">
        <div class="left-panel">
            <div class="section">
                <div class="section-title">Docker Inspect 信息</div>
                <textarea id="inspectInput" placeholder="请粘贴 docker inspect 输出的 JSON 信息"></textarea>
            </div>
            
            <div class="section">
                <div class="section-title">基本配置</div>
                <div id="basicConfig" class="checkbox-group">
                    <!-- 将由JavaScript动态填充 -->
                </div>
            </div>

            <div class="section">
                <div class="section-title">端口映射</div>
                <div id="portMappings" class="checkbox-group">
                    <!-- 将由JavaScript动态填充 -->
                </div>
            </div>

            <div class="section">
                <div class="section-title">环境变量</div>
                <div id="envVars" class="checkbox-group">
                    <!-- 将由JavaScript动态填充 -->
                </div>
            </div>

            <div class="section">
                <div class="section-title">数据卷</div>
                <div id="volumes" class="checkbox-group">
                    <!-- 将由JavaScript动态填充 -->
                </div>
            </div>

            <div class="section">
                <div class="section-title">高级选项</div>
                <div id="advancedOptions" class="checkbox-group">
                    <!-- 将由JavaScript动态填充 -->
                </div>
            </div>
        </div>

        <div class="right-panel">
            <div class="section-title">Docker 命令</div>
            <textarea id="dockerCommand" readonly></textarea>
            
            <div class="section-title">Docker Compose</div>
            <textarea id="dockerCompose" readonly></textarea>
        </div>
    </div>

    <script>
        // 添加事件监听器，监听所有复选框的变化
        function addCheckboxListeners() {
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', generateCommands);
            });
        }

        // 修改 parseInspect 函数，在生成复选框后添加监听器
        function parseInspect() {
            try {
                const inspectData = JSON.parse(document.getElementById('inspectInput').value);
                const containerConfig = inspectData[0].Config;
                const hostConfig = inspectData[0].HostConfig;
                const networkSettings = inspectData[0].NetworkSettings;

                // 解析基本配置
                const basicConfig = document.getElementById('basicConfig');
                basicConfig.innerHTML = `
                    <div class="config-item">
                        <input type="checkbox" data-type="basic" data-key="name" data-value="${inspectData[0].Name.substring(1)}" checked>
                        <span>容器名称:</span>
                        <input type="text" value="${inspectData[0].Name.substring(1)}" onchange="updateConfigValue(this)">
                    </div>
                    <div class="config-item">
                        <input type="checkbox" data-type="basic" data-key="image" data-value="${containerConfig.Image}" checked>
                        <span>镜像:</span>
                        <input type="text" value="${containerConfig.Image}" onchange="updateConfigValue(this)">
                    </div>
                    ${containerConfig.User ? `
                        <div class="config-item">
                            <input type="checkbox" data-type="basic" data-key="user" data-value="${containerConfig.User}" checked>
                            <span>用户:</span>
                            <input type="text" value="${containerConfig.User}" onchange="updateConfigValue(this)">
                        </div>
                    ` : ''}
                `;

                // 解析端口映射
                const portMappings = document.getElementById('portMappings');
                portMappings.innerHTML = '';
                if (networkSettings.Ports) {
                    Object.entries(networkSettings.Ports).forEach(([containerPort, hostBindings]) => {
                        if (hostBindings) {
                            hostBindings.forEach(binding => {
                                const containerPortNum = containerPort.split('/')[0];
                                const hostPort = binding.HostPort;
                                portMappings.innerHTML += `
                                    <div class="config-item">
                                        <input type="checkbox" data-type="port" data-key="${containerPortNum}" data-value="${hostPort}" checked>
                                        <input type="text" value="${hostPort}" onchange="updateConfigValue(this)" style="width: 80px">
                                        <span>:</span>
                                        <input type="text" value="${containerPortNum}" onchange="updateConfigKey(this)" style="width: 80px">
                                    </div>
                                `;
                            });
                        }
                    });
                }

                // 解析环境变量
                const envVars = document.getElementById('envVars');
                envVars.innerHTML = '';
                if (containerConfig.Env) {
                    containerConfig.Env.forEach(env => {
                        const [key, ...value] = env.split('=');
                        const valueStr = value.join('=');
                        envVars.innerHTML += `
                            <div class="config-item">
                                <input type="checkbox" data-type="env" data-key="${key}" data-value="${valueStr}" checked>
                                <input type="text" value="${key}" onchange="updateConfigKey(this)" style="width: 150px">
                                <span>=</span>
                                <input type="text" value="${valueStr}" onchange="updateConfigValue(this)" style="width: 250px">
                            </div>
                        `;
                    });
                }

                // 解析数据卷
                const volumes = document.getElementById('volumes');
                volumes.innerHTML = '';
                if (hostConfig.Binds) {
                    hostConfig.Binds.forEach(bind => {
                        const [src, dest] = bind.split(':');
                        volumes.innerHTML += `
                            <div class="config-item">
                                <input type="checkbox" data-type="volume" data-key="${src}" data-value="${dest}" checked>
                                <input type="text" value="${src}" onchange="updateConfigKey(this)" style="width: 200px">
                                <span>:</span>
                                <input type="text" value="${dest}" onchange="updateConfigValue(this)" style="width: 200px">
                            </div>
                        `;
                    });
                }

                // 解析高级选项
                const advancedOptions = document.getElementById('advancedOptions');
                advancedOptions.innerHTML = '';
                if (hostConfig.CgroupnsMode) {
                    advancedOptions.innerHTML += `
                        <div class="config-item">
                            <input type="checkbox" data-type="advanced" data-key="cgroupns" data-value="${hostConfig.CgroupnsMode}" checked>
                            <span>cgroupns:</span>
                            <input type="text" value="${hostConfig.CgroupnsMode}" onchange="updateConfigValue(this)">
                        </div>
                    `;
                }
                if (hostConfig.ShmSize) {
                    advancedOptions.innerHTML += `
                        <div class="config-item">
                            <input type="checkbox" data-type="advanced" data-key="shm-size" data-value="${hostConfig.ShmSize}" checked>
                            <span>shm-size:</span>
                            <input type="text" value="${hostConfig.ShmSize}" onchange="updateConfigValue(this)">
                        </div>
                    `;
                }

                // 添加事件监听器
                addCheckboxListeners();
                
                // 生成初始命令
                generateCommands();
            } catch (error) {
                // 将错误显示在输出框中，而不是弹窗
                document.getElementById('dockerCommand').value = '解析 Docker Inspect 信息失败：请确保输入的是有效的 JSON 格式';
                document.getElementById('dockerCompose').value = '解析 Docker Inspect 信息失败：请确保输入的是有效的 JSON 格式';
            }
        }

        // 添加更新配置值的函数
        function updateConfigValue(input) {
            const configItem = input.parentElement;
            const checkbox = configItem.querySelector('input[type="checkbox"]');
            checkbox.dataset.value = input.value;
            generateCommands();
        }

        // 添加更新配置键的函数
        function updateConfigKey(input) {
            const configItem = input.parentElement;
            const checkbox = configItem.querySelector('input[type="checkbox"]');
            checkbox.dataset.key = input.value;
            generateCommands();
        }

        // 修改自动调整高度函数，为 inspectInput 设置特殊处理
        function autoResizeTextarea(textarea) {
            // 如果是 inspectInput，不自动调整高度
            if (textarea.id === 'inspectInput') {
                return;
            }
            
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        // 修改 generateCommands 函数，在更新内容后调整高度
        function generateCommands() {
            const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
            
            // Docker run command
            let dockerCmd = ['docker run -d'];
            
            // Docker compose
            let composeYaml = ['version: "3"', 'services:', '  nexus:'];
            
            // 按类型分组处理选项
            const groupedOptions = {
                basic: [],
                port: [],
                env: [],
                volume: [],
                advanced: []
            };

            // 将选中的选项分组
            checkedBoxes.forEach(cb => {
                if (groupedOptions[cb.dataset.type]) {
                    groupedOptions[cb.dataset.type].push(cb);
                }
            });

            // 处理基本配置
            groupedOptions.basic.forEach(cb => {
                if (cb.dataset.key === 'name') {
                    dockerCmd.push(`--name ${cb.dataset.value}`);
                } else if (cb.dataset.key === 'user') {
                    dockerCmd.push(`--user ${cb.dataset.value}`);
                    composeYaml.push(`    user: ${cb.dataset.value}`);
                } else if (cb.dataset.key === 'image') {
                    // 将镜像放到命令最后
                    groupedOptions.image = cb.dataset.value;
                    composeYaml.push(`    image: ${cb.dataset.value}`);
                }
            });

            // 处理端口映射
            if (groupedOptions.port.length > 0) {
                const ports = groupedOptions.port.map(cb => `-p ${cb.dataset.value}:${cb.dataset.key}`);
                dockerCmd.push(...ports);
                composeYaml.push('    ports:');
                ports.forEach(port => {
                    composeYaml.push(`      - "${port.replace('-p ', '')}"`);
                });
            }

            // 处理环境变量
            if (groupedOptions.env.length > 0) {
                const envVars = groupedOptions.env.map(cb => `-e ${cb.dataset.key}="${cb.dataset.value}"`);
                dockerCmd.push(...envVars);
                composeYaml.push('    environment:');
                envVars.forEach(env => {
                    const [key, value] = env.replace('-e ', '').split('=');
                    composeYaml.push(`      ${key}: ${value}`);
                });
            }

            // 处理数据卷
            if (groupedOptions.volume.length > 0) {
                const volumes = groupedOptions.volume.map(cb => `-v ${cb.dataset.key}:${cb.dataset.value}`);
                dockerCmd.push(...volumes);
                composeYaml.push('    volumes:');
                volumes.forEach(volume => {
                    composeYaml.push(`      - "${volume.replace('-v ', '')}"`);
                });
            }

            // 处理高级选项
            groupedOptions.advanced.forEach(cb => {
                dockerCmd.push(`--${cb.dataset.key} ${cb.dataset.value}`);
                if (cb.dataset.key === 'cgroupns') {
                    composeYaml.push(`    cgroupns: ${cb.dataset.value}`);
                } else if (cb.dataset.key === 'shm-size') {
                    composeYaml.push(`    shm_size: ${cb.dataset.value}`);
                }
            });

            // 添加镜像到docker命令最后
            if (groupedOptions.image) {
                dockerCmd.push(groupedOptions.image);
            }

            // 更新输出并调整高度
            const dockerCommandTextarea = document.getElementById('dockerCommand');
            const dockerComposeTextarea = document.getElementById('dockerCompose');
            
            dockerCommandTextarea.value = dockerCmd.join(' \\\n  ');
            dockerComposeTextarea.value = composeYaml.join('\n');
            
            // 自动调整两个文本框的高度
            autoResizeTextarea(dockerCommandTextarea);
            autoResizeTextarea(dockerComposeTextarea);
        }

        // 页面加载时初始化
        window.onload = function() {
            const inspectInput = document.getElementById('inspectInput');
            const dockerCommandTextarea = document.getElementById('dockerCommand');
            const dockerComposeTextarea = document.getElementById('dockerCompose');
            
            // 为 Docker Inspect 输入框添加输入事件监听器
            inspectInput.addEventListener('input', debounce(function() {
                if (this.value.trim()) {
                    parseInspect();
                }
            }, 500)); // 添加防抖，避免频繁解析
            
            // 为输出框添加事件监听器
            dockerCommandTextarea.addEventListener('input', function() {
                autoResizeTextarea(this);
            });
            
            dockerComposeTextarea.addEventListener('input', function() {
                autoResizeTextarea(this);
            });
            
            // 如果输入框中已有内容，自动解析
            if (inspectInput.value.trim()) {
                parseInspect();
            }
        };

        // 添加防抖函数
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func.apply(this, args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
    </script>
</body>
</html> 